<template>
  <div class="home">
    <!-- 左对齐 -->
    <div class="header">
      <van-row type="flex" justify="space-between">
        <div class="header-lef">所在位置</div>
        <SreachView :title="title"></SreachView>
      </van-row>
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
        <van-swipe-item v-for="item in list" :key="item.cid"><img :src="item.icon_url" alt=""></van-swipe-item>
      </van-swipe>
      <div class="header-bot">
        <img :src="list1.image_url" alt="">
      </div>
      <div class="header-img">
        <img src="../assets/img/home/1.png" alt="">
      </div>
    </div>
    <div class="main">
      <van-grid :column-num="5" :border="false">
        <van-grid-item v-for="(item,index) in list2" :key="item.id" :icon="item.icon_url" :text="item.name" @click="onIndex(index)" />
      </van-grid>
      <van-row type="flex" justify="center">
        <img src="../assets/img/home/2.png" alt="">
      </van-row>
    </div>
    <div class="content">
      <div class="xianshi">
        <h1><i></i>限时抢购
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon"></span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon"></span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </h1>
        <span>更多></span>
      </div>
      <PrevView :list3="list3"></PrevView>
    </div>
    <div class="footer">
      <van-tabs v-model="active" color="green" title-active-color="green" animated sticky>
        <van-tab title="全部" title-style="font-weight:bold;">
          <van-grid :column-num="2">
            <ListItem v-for="item in list4.product_list" :key="item.id" :item="item"></ListItem>
          </van-grid>     
        </van-tab>
        <van-tab title="晚餐" title-style="font-weight:bold;">
          <van-grid :column-num="2">
            <ListItem v-for="item in list3.product_list" :key="item.id" :item="item"></ListItem>
          </van-grid>
        </van-tab>
        <van-tab title="人气" title-style="font-weight:bold;">
          <van-grid :column-num="2">
            <ListItem v-for="item in list4.product_list" :key="item.id" :item="item"></ListItem>
          </van-grid>
        </van-tab>
        <van-tab title="必选" title-style="font-weight:bold;">
          <van-grid :column-num="2">
            <ListItem v-for="item in list3.product_list" :key="item.id" :item="item"></ListItem>
          </van-grid>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import SreachView from '../components/SreachView.vue'
import PrevView from '../components/PrecvView.vue'
import ListItem from '../components/ListItem.vue'
export default {
  name:'HomeView', 
  data(){
    return {  
      active:0,  
      title:"请输入商品名称",
      list:[],
      list1:[],
      list2:[],
      list3:[],
      list4:[],
      time:30*60*60*1000,
    }
  },
  components:{
    SreachView,
    PrevView,
    ListItem,
  },
  async created(){
    let res=await this.$http.getHomeApi();
    console.log(res.data.data);
    this.list=res.data.data.list[0].icon_list;
    this.list1=res.data.data.list[1];
    this.list2=res.data.data.list[2].icon_list;
    this.list3=res.data.data.list[3];
    this.list4=res.data.data.list[12];
    console.log(this.list3);
  },
  methods: {
    ScrollFn(e){
      console.log(e);
    },
    onIndex(index){
      let a=index+1
      this.$router.push({path:"/list?name="+a});
    },
  },
}
</script>
<style lang="scss" scoped>
  .home{
    font-size:0.16rem;   
    .header{
      height:6rem;
      padding-top:0.2rem;
      background:url("../assets/img/home/backImage.png")no-repeat;
      .van-row{  
        .header-lef{
          width: 3.43rem;
          height: 0.7rem;
          border-radius:0.5rem;
          text-align:center;
          line-height:0.7rem;
          color:#fff;
          background:rgba(0,0,0,0.5);
        }
      .sreach{
        width:calc(100vw - 3.63rem);
        color:#ccc;
        height: 0.55rem;
      }
    }
    .my-swipe{
      height:2.92rem;
      margin-top:.14rem;
        .van-swipe-item{
          width: 100%;
          color: #fff;
          font-size: 0.2rem;
          height:2.92rem;
          line-height:2.92rem;
          text-align: center;
          background-color: #39a9ed;
          img{
            width: 100%;
            height: 100%;
          }
        }        
      }
      .header-bot{
        width: 100%;
        height: 0.64rem;
        img{
          width: 100%;
          height: 0.64rem;
        }
      }
      .header-img{
        width: 100%;
        height:1.6rem;
        img{
          width: 100%;
          height:1.6rem;
        }
      }
    }
    .main{
      .van-row{
        width:100%;
        height:.57rem;
        img{
          width:90%;
          height:.57rem;
        }
      }
    }
    .content{
      padding:0 .26rem;
      // background:#fff;
      .xianshi{
        display:flex;
        justify-content: space-between;
        align-items: center;
        h1{
          display:flex;
          justify-content: flex-start;
          i{
            width: 0.1rem;
            background:green;
            margin-right:.1rem;
          }
          .van-count-down{
            margin-left:.1rem;
            .colon {
              display: inline-block;
              margin: 0 4px;
              // color: #000;          
            }
            .block {
              display: inline-block;
              width: 22px;
              color: #fff;
              font-size: 12px;
              text-align: center;
              background-color: #000;
            }
          }     
        }  
        span{
          color:green;
        }  
      }
      .prevview{
        width: 100%;
        // padding:0 .26rem;
        height:2.5rem;
      }
    }
    .footer{
      margin-top:.2rem;
      background:#eee;
      .van-grid{
        padding:0 .16rem;
        justify-content: space-around;
      }
    }
  }
</style>
